<template>
	<view class="body">
		<view style="background-color: white;">
			<view class="header tn-flex tn-flex-direction-column tn-flex-center tn-text-center tn-flex-col-center">
				<view class="tn-flex tn-text-center tn-flex-row-center tn-flex-col-center tn-flex-center order-status">
					<text class="tn-text-xl-xxl"
						v-if="orderInfo">{{$API.order_status(orderInfo.orderStatus, orderInfo.payStatus)}}</text>
					<text class="tn-text-xl-xxl" v-else>-</text>
				</view>
			</view>
		</view>
		<view class="trans-info tn-flex tn-flex-direction-column">
			<view class="tn-flex tn-flex-direction-row">
				<view class="tn-icon-logistics" style="font-size: 44rpx; color: #888888; padding: 24rpx;"></view>
				<view style="font-size: 44rpx;  padding-top: 14rpx;padding-bottom: 24rpx;">配送信息</view>
			</view>
			<view class="tn-flex tn-text-lg tn-flex-direction-column" style="color: #909399;">
				<view class="tn-flex tn-flex-direction-row tn-flex-basic-full tn-margin-bottom">
					<view class="tn-flex-1 tn-padding-left-lg">快递公司</view>
					<view class="tn-flex-2 tn-text-right tn-padding-right"> {{ orderInfo && orderInfo.receiveInfo.trackingCompanyCode || '-' }} </view>
				</view>
				<view class="tn-flex tn-flex-direction-row tn-flex-basic-full tn-margin-bottom">
					<view class="tn-flex-1 tn-padding-left-lg">快递单号</view>
					<view class="tn-flex-2 tn-text-right tn-padding-right"> {{ orderInfo && orderInfo.receiveInfo.trackingCode || '-' }} 
						<tn-button class="cp-btn" @tap="copy(orderInfo.receiveInfo.trackingCode)" v-if="orderInfo && orderInfo.receiveInfo.trackingCode">复制</tn-button>
					</view>
				</view>
				<view class="tn-flex tn-flex-direction-row tn-flex-basic-full tn-margin-bottom">
					<view class="tn-flex-1 tn-padding-left-lg">发货时间</view>
					<view class="tn-flex-2 tn-text-right tn-padding-right"> {{ (orderInfo && orderInfo.receiveInfo.receivingTime && $API.formatDate(orderInfo.receiveInfo.receivingTime)) || '-'}} </view>
				</view>
			</view>
		</view>
		<view class="b-line"></view>
		<navigator class="address-section" @click="changeAddress">
			<view class="order-content">
				<text class="yticon icon-shouhuodizhi"></text>
				<view class="cen">
					<view class="top">
						<text class="name">{{orderInfo && orderInfo.receiveInfo.receivingPerson}}</text>
						<text class="mobile">{{orderInfo &&orderInfo.receiveInfo.receivingPhone}}</text>
					</view>
					<text class="address">{{orderInfo &&orderInfo.receiveInfo.receivingArea}} · {{orderInfo &&orderInfo.receiveInfo.receivingAddress }} </text>
				</view>
				<view class="tn-padding-right" v-if="canChangeAddr">
					<tn-button size="sm" backgroundColor="#ff7500" :plain="true" fontColor="#ff7500">修改地址</tn-button>
				</view>
			</view>
		</navigator>

		<view class="goods-section" v-if="orderInfo && orderInfo.ptOrder">
			<view class="g-header b-b">
				<text class="name">拼团购买</text>
			</view>
			<view class="tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center tn-margin">
				<view class="tn-flex tn-text-center" style="width: 100%;">
					<view class="tn-flex-basic-full" v-if="orderInfo.ptOrder.status == 100">拼团失败</view>
					<view class="tn-flex-basic-full" v-if="orderInfo.ptOrder.status == 99">超时未支付，自动取消拼团</view>
					<view class="tn-flex-basic-full" v-if="orderInfo.ptOrder.status == 20">拼团成功</view>
					<view class="tn-flex-basic-full" v-if="orderInfo.ptOrder.status == 0 || orderInfo.ptOrder.status == 10">
						<view v-if="orderInfo.ptOrder.missNum == 0">已满员，剩余时长 <tn-count-down :timestamp="orderInfo.ptOrder.expireTime" :showDays="true"
							:showHours="true" fontColor="#fe0000"></tn-count-down></view>
						<view v-else>还差<text style="color: red;"> {{ orderInfo.ptOrder.missNum }}人
						</text> 拼团成功，剩余时长 <tn-count-down :timestamp="orderInfo.ptOrder.expireTime" :showDays="true"
							:showHours="true" fontColor="#fe0000"></tn-count-down></view>
					</view>
				</view>
				<view class="tn-flex tn-flex-direction-row tn-margin tn-flex-row-between" style="width: 60%;">
					<view class="tn-flex tn-flex-direction-column tn-text-center"
						v-for="(pt,index) in orderInfo.ptOrder.members">
						<tn-avatar :src="pt.avatar" :badge="pt.role == '团长'" :text="pt.text" badgeIcon="vip"
							badgeBgColor="transparent" badgeColor="tn-color-orange" :badgeSize="40"
							:badgePosition="[-8, 18]" size="lg">
						</tn-avatar>
						<view v-if="pt.role">
							{{ pt.role }}
						</view>
						<tn-count-down :timestamp="pt.expireTime" :showDays="false" :showHours="false"
							fontColor="#fe0000" v-if="pt.expireTime && pt.status==0"></tn-count-down>

					</view>

				</view>
			</view>
		</view>

		<view class="goods-section tn-margin-top" v-if="orderInfo">
			<!-- 商品列表 -->
			<view class="tn-padding-top" v-for="(item, index) in orderInfo.orderItemList" :key="index">
				<view class="tn-flex-direction-column tn-flex-basic-full">
					<view class="g-item" @tap="goToGoodsDetail(item)">
						
						<view class="tn-flex tn-flex-direction-column tn-flex-center tn-flex-col-center">
							<image :src="item.uploadImgs && item.uploadImgs.length > 0 ? item.uploadImgs[item.uploadImgs.length - 1] : item.goodsThumb[0]">
							</image>
							
							<view v-if="replaceImgInfo[item.itemId] && replaceImgInfo[item.itemId]['tag'] == 'ing'" size="sm" style="color:lightgray;font-size: 0.8em;">上传中...<tn-loading color="#AAAAAA" mode="circle"></tn-loading></view>
							<tn-button class="tn-margin-top" v-if="replaceImgInfo[item.itemId] && replaceImgInfo[item.itemId].tag == false" size="sm" backgroundColor="tn-bg-blue" :plain="true" shape="round" @tap="doUpdateImgs(replaceImgInfo[item.itemId])">上传图片</tn-button>
						</view>
						
						<view class="right">
							<text class="title clamp tn-margin-bottom tn-margin-top-sm">{{item.goodsName}}</text>
							<text class="spec tn-margin-top" v-if="item.specItems && item.specItems.length > 0">
								{{item.specItems[0]['key']}} / {{item.specItems[0]['value']}} {{item.specItems[0]['unit']}}</text>
							<text class="spec tn-margin-top" v-else> {{ item.goodsIntro }} </text>
							<view class="price-box  tn-flex-col-center tn-flex-row-center tn-flex-direction-row">
								<text class="price">￥{{item.orderPrice}}</text>
								<text class="number">x {{item.orderQuantity}}</text>
							</view>
						</view>
					</view>
					<view class="operation">
						<view class="action-box b-t">
							<button class="action-btn" @click="showImgs(item)">查看图片</button>
							<button class="action-btn recom" v-if="orderInfo.orderStatus <= 15 && (orderInfo.payStatus != 20 && orderInfo.payStatus != 30)"
								@click="rechooseImgs(item)">重选图片</button>
						</view>
					</view>
				</view>
			</view>
			<!--付款-->
			<view class="pay-info tn-padding-bottom tn-padding-top">
				<text class="pay-name">实付金额&emsp;</text>
				<text class="pay-value">￥{{orderInfo && orderInfo.payAmount || 0 }}</text>
			</view>


			<view class="pay-info tn-padding-left tn-padding-bottom tn-color-gray--dark" v-if="orderInfo">
				备注: <text> {{orderInfo.remark ? orderInfo.remark : '  没有添加备注哦~'}} </text>
			</view>
		</view>



		<view class="order-title">订单信息</view>
		<view class="xianqg">
			<view class=" ordn">
				<view v-if="orderInfo">
					<text class="tn-margin-right">订单编号 : {{orderInfo.orderId}} </text>
					<tn-button class="tn-margin-left cp-btn" :plain="true" backgroundColor="gray" fontColor="#080808" size="sm"
						@click="copy(orderInfo.orderId + '')">复制</tn-button>
				</view>
			</view>
			<view class="ordn" v-if="orderInfo">下单时间 : {{ $API.formatDate(orderInfo.createAt)}}</view>
			<view class="ordn" v-if="orderInfo && orderInfo.payment && orderInfo.payment.thirdBillCode">
				支付交易号 : {{ orderInfo.payment.thirdBillCode }}
			</view>
			<view class="ordn" v-if="orderInfo && orderInfo.paySuccessTime">付款时间 :
				{{ $API.formatDate(orderInfo.paySuccessTime)}}
			</view>
			<view class="ordn" v-if="orderInfo && orderInfo.refund && orderInfo.refund.refundTime && orderInfo.type == 10">
				拼团失败，自动退款
			</view>
			<view class="ordn" v-if="orderInfo && orderInfo.refund && orderInfo.refund.wxRefundId">
				退款流水号 : {{ orderInfo.refund.wxRefundId }}
			</view>
			<view class="ordn" v-if="orderInfo && orderInfo.refund && orderInfo.refund.refundTime">退款时间 :
				{{ $API.formatDate(orderInfo.refund.refundTime)}}
			</view>
			<view class="ordn" v-if="orderInfo && orderInfo.receiveInfo.trackingCompanyCode">物流公司 :
				{{orderInfo.receiveInfo.trackingCompanyCode}}
			</view>
			<view class="ordn" v-if="orderInfo && orderInfo.receiveInfo.trackingCode">物流单号 :
				{{orderInfo.receiveInfo.trackingCode}}
			</view>
			<view class="ordn" v-if="orderInfo && orderInfo.deliveryTime">发货时间 :
				{{$API.formatDate(orderInfo.deliveryTime)}}
			</view>
			<view class="ordn" v-if="orderInfo && orderInfo.orderStatus == 100">超时未支付自动取消 : {{ $API.formatDate(orderInfo.updateAt)}} </view>
		</view>


		<!-- 底部 -->
		<!-- 订单状态 = 待支付，支付状态 = 未支付/支付失败 时，可以重新支付 -->
		<view class="footer" v-if="orderInfo && orderInfo.orderStatus <= 15 && (orderInfo.payStatus == 0 || orderInfo.payStatus == 100)">
			<view class="price-content tn-padding-right" style="width:100%">
				<view class="tn-flex tn-flex-direction-column  ">
					<view class="tn-flex tn-text-right tn-flex-row-right tn-flex-col-center">
						<text>合计</text>
						<text class="price-tip">￥</text>
						<text class="price" style="font-size: 1.6em;">{{orderInfo && orderInfo.payAmount || 0 }}</text>
					</view>
				</view>
			</view>

			<view class="tn-flex-direction-column submit" v-if="orderInfo">
				<view @click="toPay(orderInfo)">继续付款</view>
				<view class="tip" v-if="orderInfo.cancelTime && orderInfo.cancelTime > 0">剩余<tn-count-down
						:timestamp="orderInfo.cancelTime" :showDays="false" :showHours="true" :fontSize="22"
						fontColor="white" separatorColor="white" backgroundColor="#00000000"></tn-count-down></view>
			</view>
		</view>
		<view class="footer" v-if="orderInfo && orderInfo.orderStatus == 11 && orderInfo.ptOrder.missNum > 0">
			<view class="action-btn-group">
				<!-- 拼团中，邀请新用户 -->
				<button class="action-btn" open-type="share">邀请用户参团</button>
			</view>
			
		</view>

	</view>
</template>

<script>
	import listCell from '@/components/mix-list-cell';
	// 这个是h5的上传方式
	import * as qiniu from '../../common/qiniu.min.js'
	// 这个是小程序的上传方式
	const qiniuUploader = require("../../common/qiniuUploader");
	export default {
		omponents: {
			listCell
		},
		data() {
			return {
				orderId: "",
				orderInfo: null,
				returnAddress: null, // 返回的地址信息
				canChangeAddr: false,
				qnConfigInit: null, // 七牛配置
				imgUploadSucceedNum: 0, // 图片上传计数
				lastOrgImg: null,
				upImgs: {},
				replaceImgInfo: {},
			};
		},
		onLoad(option) {
			this.orderId = option.id;
			this.loadOrderInfo();
		},
		onShow() {
			// this.loadOrderInfo();
			let _this = this;
			uni.$on('addrChoose', function(data) {
				_this.returnAddress = data;
				console.log('用户再地址列表选中的地址为: ', _this.returnAddress);
				_this.doUpdateAddressInfo(data);
			});

			uni.$on('imgReplace', function(data) {
				// 标记为上传中
				_this.replaceImgInfo[data.detail.itemId] = data;
				console.log('图片选择替换:', data);
				_this.doUpdateImgs(data);
			})
		},
		filters: {
			isEmpty: function isEmpty(value) {
				if (value) {
					return value;
				} else {
					return "";
				}
			}
		},
		methods: {
			copy(value) {
				//提示模板
				console.log('复制内容 --> ', value);
				uni.setClipboardData({
					data: value + '', //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			loadOrderInfo() {
				// 查询订单列表
				let _this = this;
				this.$Net.req({
					url: this.$API.fetchOrderDetail(),
					method: "get",
					data: {
						'orderId': this.orderId,
					},

					dataType: 'json',
					success: function(result, status) {
						let ptOrder = result.ptOrder;
						if (ptOrder) {
							// 结束时间
							ptOrder.expireTime = parseInt((ptOrder.endTime - new Date().getTime()) / 1000)
							if (ptOrder.expireTime <= 0) {
								ptOrder.expireTime = 0;
							}
							let i = ptOrder.ptNum - ptOrder.members.length
							for (let mem of ptOrder.members) {
								if (mem.status == 0) {
									// 未支付
									mem.expireTime = parseInt((mem.expireTime - new Date().getTime()) / 1000)
									mem.role = '待支付'
								}
							}
							ptOrder.missNum = i;
							ptOrder.members[0].role = '团长'
							for (; i > 0; i--) {
								ptOrder.members.push({
									text: '?'
								})
							}
							
							try {
								_this.$shareDesc =  ptOrder.title
								_this.$shareTitle = result.orderItemList[0].goodsName
								_this.$shareImg = result.orderItemList[0].goodsThumb[0]
								_this.$shareParam = `/pages/product/product?id=${result.orderItemList[0].goodsId}`
							} catch (e) {
								console.log("拼接拼团分享信息异常", e);
							}
						}
						if (result.latestPayTime) {
							result.cancelTime = parseInt((result.latestPayTime - new Date().getTime()) / 1000)
						} else {
							result.cancelTime = 0;
						}
						_this.orderInfo = result
						// 订单状态小于待打印时，可以修改收货地址和替换图片
						_this.canChangeAddr = _this.orderInfo.orderStatus <= 15 && (_this.orderInfo.payStatus != 20 && _this.orderInfo.payStatus != 30)
						console.log('订单明细: ', _this.orderInfo);
						
						
					},
				});
			},
			goToGoodsDetail(item) {
				this.$API.goTo(`/pages/product/product?id=${item.goodsId}`)
			},
			showImgs(item) {
				// 查看用户自己上传的图片
				console.log('查看用户自己上传的图片:', item);
				uni.previewImage({
					current: 0,
					urls: item.uploadImgs
				});
			},
			rechooseImgs(item) {
				// 重新选择更新图片
				let data = {
					"goodsId": item.goodsId,
					"goodsInfo": item,
					"specInfo": item.specItems[0],
					"buyCnt": 1
				}

				console.log('选中的图片信息:', item);
				uni.navigateTo({
					url: `/pages/cropper/cropper?source=order`, //表示从订单详情过来的
					// 版本2.8.9+ 支持
					success: (res) => {
						// 和上面其实没差什么,但是这种方式是可以的 这里不是$emit
						res.eventChannel.emit('sendPayGoods', data)
					}
				})
			},
			doUpdateImgs(item) {
				uni.showLoading({
					title: '图片上传中，请耐心等候~'
				})
				
				item.tag = 'ing';
				setTimeout(() => {
					uni.hideLoading();
				}, 600)

				let _self = this;
				// 更新替换图片
				let replaceImgs = item.sizeList[0];
				if (this.lastOrgImg != replaceImgs['originalImg']) {
					// 没有上传过，重新上传
					this.lastOrgImg = replaceImgs['originalImg']
					this.uploadImgs(replaceImgs['originalImg'], replaceImgs['tempFilePath'], (res, source) => {
						// 图片上传
						this.upImgs[source] = res;
						if (this.imgUploadSucceedNum >= 2 && this.upImgs['origin'] && this.upImgs['cut']) {
							let upImgs = [this.upImgs['cut']]
							if (this.upImgs['thumb']) {
								upImgs.push(this.upImgs['thumb'])
							}
							let orgImgs = [this.upImgs['origin']]
							const itemId = item.detail.itemId;
							// 全部上传完成，执行图片上传
							this.$Net.req({
								url: this.$API.execUpdateOrder(),
								method: "post",
								header: {
									'Content-Type': 'application/json'
								},
								data: {
									'orderId': this.orderId,
									'itemList': [{
										'detailId': itemId,
										'originalImgs': orgImgs,
										'uploadImgs': upImgs
									}],
								},
								dataType: 'json',
								success: function(result, status) {
									// 刷新详情
									_self.replaceImgInfo[itemId].tag = true;
									for (let item of _self.orderInfo.orderItemList) {
										if (item.itemId == itemId) {
											item.originalImgs = orgImgs
											item.uploadImgs = upImgs
										}
									}
									_self.$api.msg('图片更新成功')
								},
								complete: function() {}
							});

							// 上传相关信息置空
							this.lastOrgImg = null;
							this.imgUploadSucceedNum = 0;
							this.upImgs = {}
						}
					}, (err, source) => {
						// 上传失败
						_self.$api.msg('图片更新失败，请重试~')
						this.lastOrgImg = null;
						this.imgUploadSucceedNum = 0;
						this.upImgs = {}
						_self.replaceImgInfo[item.detail.itemId].tag = false;
					})
				}
			},
			// 跳转地址列表，进行修改地址
			changeAddress() {
				if (this.canChangeAddr) {
					// 订单详情，点击之后进入地址列表
					this.$API.goTo("/pages/address/address?source=1")
				}
			},
			doUpdateAddressInfo(addrInfo) {
				// 更新订单上的收货地址信息
				let receivingPerson = this.orderInfo.receiveInfo['receivingPerson']
				let receivingPhone = this.orderInfo.receiveInfo['receivingPhone']
				let receivingArea = this.orderInfo.receiveInfo['receivingArea']
				let receivingAddress = this.orderInfo.receiveInfo['receivingAddress']

				let hasDiff = false;
				if (addrInfo.address != receivingAddress) {
					hasDiff = true;
					receivingAddress = addrInfo.address
				}
				if (addrInfo.phone != receivingPhone) {
					hasDiff = true;
					receivingPhone = addrInfo.phone
				}
				if (addrInfo.person != receivingPerson) {
					hasDiff = true;
					receivingPerson = addrInfo.person
				}
				if (addrInfo.area != receivingArea) {
					hasDiff = true;
					receivingArea = addrInfo.area;
				}
				if (hasDiff) {
					var _self = this;
					uni.showLoading({
						title: '请稍后'
					})
					this.$Net.req({
						url: this.$API.execUpdateOrder(),
						method: "post",
						header: {
							'Content-Type': 'application/json'
						},
						data: {
							'orderId': this.orderId,
							'receivingPerson': receivingPerson,
							'receivingAddress': receivingAddress,
							'receivingPhone': receivingPhone,
							'receivingArea': receivingArea
						},
						dataType: 'json',
						success: function(result, status) {
							// 更新成功
							console.log(result)
							_self.orderInfo.receiveInfo.receivingPerson = receivingPerson;
							_self.orderInfo.receiveInfo.receivingAddress = receivingAddress;
							_self.orderInfo.receiveInfo.receivingPhone = receivingPhone;
							_self.orderInfo.receiveInfo.receivingArea = receivingArea;
							_self.$api.msg('收货地址更新成功')
						},
						complete: function() {
							uni.hideLoading();
						}
					})
				}
			},
			toPay(order) {
				// 继续付款
				console.log(order)
				if (order.payment.prePayId) {
					let prePayInfo = order.payment.prePayInfo;
					let _this = this
					uni.requestPayment({
						provider: 'wxpay',
						nonceStr: prePayInfo.nonceStr,
						package: prePayInfo.prePackage,
						paySign: prePayInfo.paySign,
						signType: prePayInfo.signType,
						timeStamp: prePayInfo.timeStamp,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							if (res['errMsg'] == 'requestPayment:ok') {
								// 支付成功，请求后端接口，将订单状态设置为支付成功
								_this.$Net.req({
									url: _this.$API.execPaying(),
									data: {
										'orderId': order.orderId,
									},
									dataType: 'json',
									success: function(result, status) {
										// 更新成功
										console.log("标记为支付成功")
										_this.$api.msg('支付成功')
									}
								})
							}
						},
						fail: function(err) {
							_this.$api.msg('微信支付出现故障啦~ 刷新试试')
						}
					});
				} else {
					_this.$api.msg("唤起微信支付失败，请稍后再试~");
				}
			},
			confirmReceipt(id) {
				var _self = this;
				uni.showLoading({
					title: '请稍后'
				})
				api.post('Order/shouhuo', {
					"id": id
				}).then(res => {
					console.log(res)
					uni.hideLoading();
					this.loadOrderInfo();
				})
			},

			async uploadImgs(orgImg, cutImg, callbackFunc, failFunc) {
				// #ifdef H5
				await this.uploadImgsByH5(orgImg, cutImg, callbackFunc, failFunc)
				// #endif
				// #ifdef MP-WEIXIN
				await this.uploadImgsByWxApp(orgImg, cutImg, callbackFunc, failFunc)
				// #endif
			},

			async uploadImgsByH5(orgImg, cutImg, callbackFunc, failFunc) {
				// h5方式上传
				let config = {
					region: null // 自动解析上传区域
				}
				let _this = this;
				this.$Net.fetchImgUploadToken(this.$API.fetchImgUploadToken(), async (imgToken) => {
					const baseFile = this.$API.buildUploadImgPath()
					let cutImgName = `${baseFile}cut.png`
					const file = _this.$API.imgToBlob(cutImg)
					const observable = qiniu.upload(file, cutImgName, imgToken.token, {}, config)
						.subscribe({
							error(err) {
								if (failFunc) {
									failFunc(err, "cut")
								}
							},
							complete(res) {
								_this.imgUploadSucceedNum += 1;
								callbackFunc(imgToken.host + cutImgName, "cut")
								console.log('裁剪图片上传成功', res)
							}
						})

					// 上传缩略图
					let thumbImgName = `${baseFile}thumb.png`
					_this.$API.photoCompress(cutImg, {
						width: 160,
						height: 160
					}, (res) => {
						const subfile = _this.$API.imgToBlob(res)
						qiniu.upload(subfile, thumbImgName, imgToken.token, {}, config)
							.subscribe({
								complete(res) {
									callbackFunc(imgToken.host + thumbImgName, "thumb")
									console.log('缩略图上传成功 --> ', res);
								},
								error(err) {
									if (failFunc) {
										failFunc(err, "thumb")
									}
								}
							})
					})

					// 下面这种适用于原图上传的场景
					let orgImgName = `${baseFile}org.png`
					const url = await qiniu.getUploadUrl(config, imgToken.token);
					console.log('上传原图 -> 请求url', url)
					new Promise((resolve, reject) => {
						uni.uploadFile({
							url: url,
							filePath: orgImg,
							name: 'file',
							formData: {
								key: orgImgName, // 上传的文件名
								token: imgToken.token
							},
							success: (ans) => {
								console.log('原始图片上传返回结果', ans);
								if (ans.statusCode == 200) {
									_this.imgUploadSucceedNum += 1;
									callbackFunc(imgToken.host + orgImgName, "origin")
								}
							},
							fail: (err) => {
								console.log('返回失败', err);
								if (failFunc) {
									failFunc(err, "origin");
								}
							}
						})
					})
				});
			},
			uploadImgsByWxApp(orgImg, cutImg, callbackFunc, failFunc) {
				// 小程序方式上传
				this.initQiniu()
				let _this = this;
				let fileName = this.$API.buildUploadImgPath();
				console.log("准备上传文件: ", fileName);

				let orgImgName = `${fileName}org.png`;
				qiniuUploader.upload(orgImg, (res) => {
						console.log(`${orgImgName} 上传完成:`, res);
						_this.imgUploadSucceedNum += 1;
						callbackFunc(res.fileURL, "origin");
					}, (error) => {
						console.log('上传失败: ->', error);
						if (failFunc) {
							failFunc(error, "origin")
						}
					}, {
						region: 'SCN', // 华北区
						uptokenURL: this.$API.fetchImgUploadToken(),
						domain: this.$API.imgHost(),
						shouldUseQiniuFileName: false,
						qiniuBucketURLPrefix: '',
						key: orgImgName
					},
					(progress) => {
						// 这里是上传的进度情况
						console.log('上传进度', orgImgName, progress.progress);
						console.log('已经上传的数据长度', orgImgName, progress.totalBytesSent);
						console.log('预期需要上传的数据总长度', orgImgName, progress.totalBytesExpectedToSend);
					})

				let cutImgName = `${fileName}cut.png`;
				qiniuUploader.upload(cutImg, (res) => {
						console.log(`${cutImgName} 上传完成:`, res);
						_this.imgUploadSucceedNum += 1;
						callbackFunc(res.fileURL, "cut");
					}, (error) => {
						console.log('上传失败: ->', error);
						if (failFunc) {
							failFunc(error, "cut")
						}
					}, {
						region: 'SCN', // 华北区
						uptokenURL: this.$API.fetchImgUploadToken(),
						domain: this.$API.imgHost(),
						shouldUseQiniuFileName: false,
						qiniuBucketURLPrefix: '',
						key: cutImgName
					},
					(progress) => {
						// 这里是上传的进度情况
						console.log('上传进度', cutImgName, progress.progress);
						console.log('已经上传的数据长度', cutImgName, progress.totalBytesSent);
						console.log('预期需要上传的数据总长度', cutImgName, progress.totalBytesExpectedToSend);
					})
			},

			// 初始化七牛云相关配置
			initQiniu() {
				if (this.qnConfigInit) {
					return;
				}
				var options = {
					// bucket所在区域，这里是华北区。ECN, SCN, NCN, NA, ASG，分别对应七牛云的：华东，华南，华北，北美，新加坡 5 个区域
					region: 'SCN',

					// 获取uptoken方法三选一即可，执行优先级为：uptoken > uptokenURL > uptokenFunc。三选一，剩下两个置空。推荐使用uptokenURL，详情请见 README.md
					// 由其他程序生成七牛云uptoken，然后直接写入uptoken
					uptoken: '',
					// 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "0MLvWPnyy..."}
					uptokenURL: this.$API.fetchImgUploadToken(),
					// uptokenFunc 这个属性的值可以是一个用来生成uptoken的函数，详情请见 README.md
					uptokenFunc: function() {
						// do something
						return qiniuUploadToken;
					},

					// bucket 外链域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 fileURL 字段。否则需要自己拼接
					domain: 'http://yss.hhui.top',
					// qiniuShouldUseQiniuFileName 如果是 true，则文件的 key 由 qiniu 服务器分配（全局去重）。如果是 false，则文件的 key 使用微信自动生成的 filename。出于初代sdk用户升级后兼容问题的考虑，默认是 false。
					// 微信自动生成的 filename较长，导致fileURL较长。推荐使用{qiniuShouldUseQiniuFileName: true} + "通过fileURL下载文件时，自定义下载名" 的组合方式。
					// 自定义上传key 需要两个条件：1. 此处shouldUseQiniuFileName值为false。 2. 通过修改qiniuUploader.upload方法传入的options参数，可以进行自定义key。（请不要直接在sdk中修改options参数，修改方法请见demo的index.js）
					// 通过fileURL下载文件时，文件自定义下载名，请参考：七牛云“对象存储 > 产品手册 > 下载资源 > 下载设置 > 自定义资源下载名”（https://developer.qiniu.com/kodo/manual/1659/download-setting）。本sdk在README.md的"常见问题"板块中，有"通过fileURL下载文件时，自定义下载名"使用样例。
					shouldUseQiniuFileName: false
				};
				// 将七牛云相关配置初始化进本sdk
				qiniuUploader.init(options);
				this.qnConfigInit = true;
			},
		}
	}
</script>

<style lang="scss">
	@import "@/common/details.scss";

	.body {
		background: #f4f4f4;
	}

	.header {
		height: 200upx;
		background: url('../../static/detail_header.jpg') no-repeat 0px 0px;
		border-radius: 20rpx;
		margin: 8rpx 24rpx;

		.order-status {
			text {
				position: absolute;
				top: 30upx;
				color: rgba(255, 255, 255, 1);
			}

			image {
				position: absolute;
				top: 10upx;
				right: 60upx;
				width: 300upx;
				height: 200upx;
			}

		}
	}
	
	.trans-info {
			padding: 30upx 0;
			background: #fff;
			position: relative;
			margin-top: -0.3em;
	}

	.order-info {
		margin-top: 20upx;
		background: #fff;

		.info-title {
			position: relative;
			left: 30upx;
			font-size: 28upx;
		}

		.p-row {
			position: relative;
			left: 40upx;
			min-height: 50upx;

			.p-name {
				display: block;
				color: #908181;
				font-size: 20upx;
				min-width: 150upx;
				float: left;
				margin-top: 15upx;
			}

			.p-value {
				display: block;
				color: black;
				float: left;
				font-size: 20upx;
				margin-top: 15upx;
			}
		}

	}

	.operation {
		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;
			position: relative;
			padding-right: 30upx;
		}

		.action-btn {
			width: 160upx;
			height: 50upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 50upx;
			font-size: $font-sm - 2upx;
			color: $font-color-dark;
			background: #f4f4f4;
			border-radius: 100px;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				background: #ff7300;
				color: white;

				&:after {
					border-color: #ff7300;
				}
			}
		}
	}

	.order-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32upx;
		color: #464e52;
		padding: 30upx 30upx 30upx 50upx;
		margin-top: 20upx;
		position: relative;
		background-color: #fdfdfd;
		border-bottom: 1px #f5f5f5 solid
	}

	.order-title__after {
		position: relative;
		color: #031e3c
	}

	.order-title:after {
		content: '';
		position: absolute;
		left: 30upx;
		margin: auto;
		top: 0;
		bottom: 0;
		width: 6upx;
		height: 32upx;
		background-color: #ccc
	}

	.xianqg {
		margin-top: 1upx;
		background-color: #fff;
		padding: 0 30upx;
		padding-bottom: 120upx;
	}

	.ordn {
		border-bottom: 1px #f5f5f5 solid;
		font-size: 28upx;
		padding: 20upx 20upx;
		color: #464e52;
	}

	.cp-btn {
		background: #f4f4f4;
		border-radius: 10rpx;
		padding: 14rpx;
		font-size: 0.8em;
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 120upx;
		justify-content: space-between;
		font-size: 30upx;
		background-color: #fff;
		z-index: 998;
		color: $font-color-base;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, .1);

		.price-content {
			padding-left: 30upx;
		}

		.price-tip {
			color: $base-color;
			margin-left: 8upx;
		}

		.price {
			font-size: 36upx;
			color: $base-color;
		}

		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 12upx;
			width: 360upx;
			margin-top: 5%;
			margin-bottom: 5%;
			margin-right: 1%;
			height: 70%;
			color: #fff;
			font-size: 34upx;
			background-color: $base-color;
		}

		.tip {
			padding-top: 2upx;
			font-size: 22upx;
		}
		
		.action-btn-group {
			display: flex;
			height: 76upx;
			width: 95%;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
			margin-left: 20upx;
			position: relative;
		
			&:after {
				content: '';
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255, 255, 255, .5);
			}
		
			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				color: white;
				font-size: $font-base ;
				padding: 20rpx;
				border-radius: 0;
				background: transparent;
			}
		}
	}
</style>